<template>
	<!-- 电话列表 -->
	<view class="list">

		<!-- box -->
		<view class="box" v-for="(item,index) in phoneList" @click="popup_ctrl(index)">
			<!-- header -->
			<view class="item-text">
				<view class="text-icon"></view>
				<view class="text">{{item.text}}</view>
			</view>
			<!-- header -->
			<!-- content -->
			<view class="phone">
				<view class="phone-text">{{item.phone||'添加家人电话'}}</view>
				<view class="phone-change" >
					<image src="../../../static/mine/edit.png" class="change-icon"></image>
					<text class="change-text">修改</text>
				</view>
			</view>
			<!-- content -->
		</view>
		<!-- box -->
		<!-- 弹窗控制 -->
		<u-popup v-model="show_popup" mode="bottom" border-radius="14" height="55%" :closeable="true">
			<view style="margin-top: 50rpx;">
				<view style="text-align: center;margin-bottom: 50rpx;">
					编辑{{phoneList[target_index].text}}
				</view>
				<u-field v-model="mobile_inputed" label="手机号" placeholder="请填写手机号" style="height: 50px;" ></u-field>

				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<u-field v-model="verifycode" label="验证码" placeholder="请填写验证码" style="height: 50px;"></u-field>

					<u-button @tap="getCode" type="primary" size="mini">{{button_tips}}</u-button>
				</view>

				<!-- 验证码组件 就一个独立的按钮 -->
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" change-text="x秒后获取"
						end-text="10分钟有效" start-text="获取验证码"> </u-verification-code>
				</view>
				<!-- 验证码组件 -->

				<u-button @click="user_add_phonenumber" style="margin-top: 100rpx; width: 40%;" type="mini">确定
				</u-button>
			</view>
		</u-popup>
		<!-- 弹窗控制 -->
		<!-- <u-button @click="popup_ctrl">打开</u-button> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pop_closeable: true,
				show_popup: false,
				button_tips: '',
				seconds: 60,
				target_index: 0, //当前弹出菜单对应的编辑对象
				phoneList: [{
					text: '自己的电话',
					phone: ''
				}, {
					text: '家人电话1',
					phone: ''
				}, {
					text: '家人电话2',
					phone: ''
				}],
				mobile_inputed: '',
				verifycode: ''
			}
		},
		onLoad() {
			let that = this
			that.$u.api.user_get_phone_list().then(res => {
				for (var i = 0; i < res.data.length; i++) {
					that.phoneList[i].phone = res.data[i].mobile
				}
			})
		},
		methods: {
			// 增加电话号码
			user_add_phonenumber() {
				this.$u.api.user_add_phone_number({
					mobile: this.mobile_inputed,
					code: this.verifycode
				}).then(res => {
					
					// this.$refs.uCode.end();
					if(res.code==200){
						this.phoneList[this.target_index].phone = this.mobile_inputed
						this.show_popup = false
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
					}
				})
			},
			// 弹窗控制
			popup_ctrl(index) {
				this.show_popup = true
				this.target_index = index
			},
			codeChange(text) {
				this.button_tips = text;
			},
			// 获取验证码
			getCode() {
				if(this.button_tips === '获取验证码') {
					this.$u.api.get_phone_verify_code({
						mobile: this.mobile_inputed
					}).then(res => {
						if (res.code == 200) {
							this.$u.toast(res.msg);
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.msg);
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding-top: 100rpx;
		background-color: #F5F5F5;
		height: 100%;
	}
  .box {
		padding-left: 40rpx;
		margin-bottom: 50rpx;
	}
	.item-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10rpx;
		.text-icon {
			width: 2px;
			height: 19rpx;
			background-color: #69DDE8;
		}
		.text {
			font-size: 32rpx;
			margin-left: 9rpx;
			font-weight: 550;
		}
	}
	.phone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #DDDDDD;
		.phone-text {
			margin-left: 9rpx;
			color: #808080;
			padding-bottom: 15rpx;
			padding-top: 15rpx;
			font-size: 28rpx;
		}
		.phone-change {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-right: 20rpx;
			.change-icon {
				width: 26rpx;
				height: 26rpx;
			}
			.change-text {
				font-size: 28rpx;
				margin-left: 5rpx;
			}
		}
	}
</style>
